<template>

  <div class="common-layout">
    <el-container class="background">
      <el-header class="element-head">
        <div class="he-container">
          <svg viewBox="0 0 400 200">
            <text x="0" y="8%"> {{ selectedService }}</text>
          </svg>
        </div>

<!--        <div >-->
<!--          -->
<!--        </div>-->
        <div class="container ">
          <el-avatar class="user" @click="User() "> {{ this.username }}</el-avatar>
          <img src="../picture/verify.svg" class="containerImg" @click="verify">
        </div>
      </el-header>
      <el-main class="element-main" style="height: 674px;position: relative;">

        <div class="service-type">
          <div class="model-container">
            <h1>模型</h1>
            <el-select v-if="selectedService === 'Intelligent robot'" class="select" v-model="selectedModel"
                       size="large" placeholder="选择模型">
              <el-option v-for="fruit in models" :key="fruit.value" :label="fruit.label"
                         :value="fruit.value"></el-option>
            </el-select>

            <el-select v-if="selectedService === 'Free online service'" class="select" v-model="selectedModel"
                       size="large" placeholder="选择模型">
              <el-option v-for="fruit in tools" :key="fruit.value" :label="fruit.label"
                         :value="fruit.value"></el-option>
            </el-select>

            <h1>服务</h1>
            <el-select class="select" v-model="selectedService" size="large" placeholder="选择服务">
              <el-option class="option" v-for="fruit in services" :key="fruit.value" :label="fruit.label"
                         :value="fruit.value"></el-option>
            </el-select>
            <!-- <p>你选择的水果是：{{ selectedFruit }}</p> -->

          </div>

          <div class="arrow">
            <component :is="current_arrow"></component>
          </div>

          <div class="rope">
            <component :is="current_water"></component>
          </div>

        </div>

        <div v-if="selectedService === 'Intelligent robot'" class="dialogue">
          <!-- 这里根据变量 `currentComponent` 的值来动态显示不同的组件 -->
          <component :is="currentComponent" :dataFromHomePage="selectedModel" :dataHomeName="un"></component>
        </div>

        <div v-if="selectedModel === 'Json'" class="dialogue">
          <!-- 这里根据变量 `currentComponent` 的值来动态显示不同的组件 -->
          <component :is="current_json"></component>
        </div>

        <div v-if="selectedModel === 'Base'" class="dialogue">
          <!-- 这里根据变量 `currentComponent` 的值来动态显示不同的组件 -->
          <component :is="current_base"></component>
        </div>

      </el-main>

    </el-container>
  </div>
  <div id="app">
    <div v-if="showAlert" class="alert-box">

      <text>只能问答机器人需要关注公众号才能使用哦</text>
      <img src="../picture/WeChatPA.jpg" alt="关注公众号">
      <button @click="closeAlert">关闭</button>
    </div>
  </div>

  <div id="app">

    <div v-if="showVerify" class="alert-verify">
      <!--      <div class="loading-animation" ref="lottieContainer" ></div>-->
      <br>
      <div class="form-group" >
        <label for="verificationCode">验证码: </label>
<!--        <el-input  style="width: 240px" placeholder="请从微信公众号获取验证码" />-->
                <input class="put" style="width: 200px" type="text" id="verificationCode" placeholder="请从微信公众号获取验证码">
      </div>

      <div class="modal-footer">
        <el-button type="primary" @click="showVerify = false">关闭</el-button>
        <el-button type="primary" >确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import lottie from 'lottie-web';
import animationData from '/src/json/loading.json'; // 根据实际路径修改

import BaseConversion from './service/BaseConversion.vue'; // 导入其他 Vue 组件
import JsonParsing from './service/JsonParsing.vue';
import ChatDialogue from './ChatGlm/ChatDialogue.vue'

import Rope from './CssPage/RopeView.vue'
import Arrow from './CssPage/ArrowView.vue'
import WaterDrop from './CssPage/WaterDrop.vue'
// import Wavy from './CssPage/WavyView.vue'
// import BorderLine from './CssPage/BorderLineView.vue'
// import Modal from './TipsView.vue';

import {ref, onMounted} from 'vue';
import {defineComponent} from 'vue'
import router from "@/router/router";

export default defineComponent({
  props: ['username'],
  setup() {
    const showAlert = ref(true); // 控制提示窗是否显示

    onMounted(() => {
      // 可以在这里执行其他初始化代码，例如设置定时器自动关闭提示窗
      // setTimeout(() => {
      //   closeAlert();
      // }, 5000); // 5秒后关闭提示窗
    });

    function closeAlert() {
      showAlert.value = false; // 隐藏提示窗
    }

    return {
      showAlert,
      closeAlert
    };
  },
  data() {
    return {
      name: '',
      currentComponent: ChatDialogue, // 初始化时显示的组件
      current_base: BaseConversion,
      current_json: JsonParsing,
      current_rope: Rope,
      current_arrow: Arrow,
      current_water: WaterDrop,
      // current_line: Wavy,
      // current_bl: BorderLine,
      selectedModel: 'GLM_3_5_TURBO', // 默认选中的模型
      un: this.username,
      models: [ // 水果选项数组
        {label: 'glm-3-turbo', value: 'GLM_3_5_TURBO'},
        {label: 'glm-4', value: 'GLM_4'},
        //{ label: '橙子', value: 'orange' },
      ],
      tools: [
        {label: 'Json解析器', value: 'Json'},
        {label: '进制转换器', value: 'Base'}
      ],
      selectedService: 'Intelligent robot', // 默认选中的模型
      services: [ // 水果选项数组
        {label: 'ChatGLM', value: 'Intelligent robot'},
        {label: '工具', value: 'Free online service'},
        //{ label: '橙子', value: 'orange' },
      ],
      showVerify: false,
      animationInstance: null, // 用于存储 Lottie 动画实例的变量
    }

  },
  mounted() {
    this.name = this.username;
    this.initLottie();
    if (!sessionStorage.getItem('pageRefreshed')) {
      sessionStorage.setItem('pageRefreshed', true);
      window.location.reload(); // 刷新当前页面
    } else {
      sessionStorage.removeItem('pageRefreshed'); // 清除标记，确保下次可以再次刷新
    }
  },
  methods: {
    initLottie() {
      this.animationInstance = lottie.loadAnimation({
        container: this.$refs.lottieContainer, // 指定容器
        renderer: 'svg', // 可选：渲染方式，默认是 'svg'
        loop: true, // 可选：是否循环播放，默认为 true
        autoplay: true, // 可选：是否自动播放，默认为 true
        animationData: animationData // 动画数据
      });
    },
    verify() {
      this.showVerify = true;
      console.log("认证")
    },
    User() {
      // window.location.href = '/user'
      // 获取用户名
      const user = this.name;
      //重定向到另一个工程的页面
      // window.location.href = '/home';
      router.push({name: 'user', params: {user}});
    },
  },

  watch: {
    selectedService(newValue) {
      if (newValue === 'Intelligent robot') {
        this.selectedModel = 'GLM_3_5_TURBO'; // 重置模型选择
      } else if (newValue === 'Free online service') {
        this.selectedModel = 'Json'; // 重置模型选择
      }
    }
  }


})


</script>

<style>
@import '/src/CSS/HoverLine.css';


.background {
  border-radius: 5px; /* 设置圆角 */
}

.element-head {
  position: relative;
  border-radius: 5px; /* 设置圆角*/
  //box-shadow: 2px 2px 4px rgba(180, 177, 177, 0.5);
  /* border-radius: ; 设置圆角*/
}
/*
.element-main {
  /* border: 2px solid #000000; 设置边框的宽度、样式和颜色
  border-radius: 5%; /* 设置圆角
}
*/
.he-container {
  height: 100%;
  width: 80%;
  //border: 2px solid #000000; /* 设置边框的宽度、样式和颜色 */
}

.user {
  background-color: cadetblue;
  cursor: pointer;
  float: right;
  font-family: fantasy;
}

.containerImg {
  position: absolute;
  float: left;
  top: 0px; /* 距离顶部的距离，可以根据实际需求调整 */
  width: 45px; /* 可以根据实际需求设置头像的宽度 */
  height: 43px; /* 可以根据实际需求设置头像的高度 */
}


.container {
  position: absolute;
  float: left;
  top: 10px; /* 距离顶部的距离，可以根据实际需求调整 */
  right: 10px; /* 距离右侧的距离，可以根据实际需求调整 */
  width: 150px; /* 可以根据实际需求设置头像的宽度 */
  height: 50px; /* 可以根据实际需求设置头像的高度 */
}

.dialogue {
  position: absolute;
  right: 0%;
  background-color: white;
  /* border: 2px solid #000000; */
  border-radius: 5px; /* 设置圆角 */
  box-shadow: 5px 5px 4px rgba(180, 177, 177, 0.5);
  width: 75.5%;
  height: 97%;
}

.service-type {
  position: absolute;
  left: 1%;
  top: 3%;
  background-color: white;
  border-radius: 1%; /* 设置圆角 */
  box-shadow: 2px 2px 4px rgba(180, 177, 177, 0.5);
  /* border: 2px solid #000000; */
  width: 23%;
  height: 97%;
}

.model-container {
  /* border: 2px solid #000000; */
  height: 40%;
  width: 100%;
  border-radius: 5%; /* 圆角半径为10px */
  margin-bottom: 0%;
}

.select {
  position: relative;
  width: 90%;
  left: 1%;
  font-family: Arial, sans-serif; /* 设置 <el-select> 中的文本字体 */
  font-size: 16px; /* 设置 <el-select> 中的文本大小 */
  font-weight: bold; /* 设置 <el-select> 中的文本加粗 */
  /* 其他字体样式属性 */
}

.arrow {
  width: 100%;
}

.rope {
  position: absolute;
  bottom: 0%;
  height: 51.5%;
  width: 90%;
}

/* 页面弹窗内容 */

.tips {
  background-color: #3498db;
  color: aquamarine;
}

.modal-footer {
  margin-top: 20px;
  text-align: right;
  display: flex;
  justify-content: flex-end; /* 按钮右对齐 */
}

.put{
  border-radius: 20px
}

.form-group {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  height: 100%; /* 设置页面高度为100% */
}

.form-group input {
  flex: 1; /* 输入框填充剩余空间 */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.alert-verify {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 200px;
  width: 300px;
  transform: translate(-50%, -50%);
  z-index: 99;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
  display: flex;
  flex-direction: column; /* 这将使内容垂直排列 */
  align-items: center; /* 这将使内容水平居中 */
  margin: 0;
  //padding: 0;
  background-image: url("../picture/newRabot.svg");
  background-size: cover; /* 背景图片尺寸调整 */
  background-position: center; /* 背景图片位置 */
}

.alert-box {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 300px;
  width: 250px;
  transform: translate(-50%, -50%);
  z-index: 9999;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
  display: flex;
  flex-direction: column; /* 这将使内容垂直排列 */
  align-items: center; /* 这将使内容水平居中 */
  /* 线性渐变：从红色 (#ffcccc) 到浅绿色 (#ccffcc) */
  background: linear-gradient(to right, #4f6bf5, #bec784),
    /* 径向渐变：从浅蓝色 (#ccccff) 到浅黄色 (#ffffcc) */ radial-gradient(circle, #ee0ce9, #8fded6);
  background-blend-mode: screen; /* 叠加模式 */
}

.alert-box img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px; /* 保持图片和文字之间有空间 */
}

.alert-box span {
  margin-top: 10px; /* 在文字上方添加一些空间 */
}

.alert-box button {
  margin-top: 10px;
}

.loading-animation {
  //position: absolute;
  //top: 10px; /* 距离顶部的距离，可以根据实际需求调整 */
  //right: 120px; /* 距离右侧的距离，可以根据实际需求调整 */
  width: 100px; /* 调整动画容器的宽度 */
  height: 100px; /* 调整动画容器的高度 */
  border: 2px solid #000000;
}

button {
  padding: 8px 16px;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 4px;
  border: none;
  background-color: #3591d5;
  color: #000000;
}
</style>
